<template>
  <div class="basic-info-wrapper window-wrapper">
    <div class="container">
      <div class="person-info">
        <h3>
          ABOUT ME
          <strong>
            {{$store.state.language === 'zh-CN' ? "邱铁" : "Tie Qiu(Alex)"}}
          </strong>
        </h3>
        <img align="left" hspace="10" vspace="5" :src="require('../assets/avatar.png')" />
        <div
          class="content ql-editor"
          v-if="$store.state.language === 'zh-CN'"
          v-html="personInfo"
        >{{personInfo}}</div>
        <div class="content" v-else v-html="enPersonInfo">{{enPersonInfo}}</div>
      </div>
      <div class="news-award">
        <!-- <div class="award-wrapper">
          <h3 v-if="$store.state.language === 'zh-CN'">
            研究小组通知
          </h3>
          <h3 v-else>
            Announcement
          </h3>
          <div class="award-list">
            <div class="award-instance" v-for="(item, _) in enAwardList" :key="_">
              <div class="content">
                <i class="el-icon-trophy"></i>
                {{item.content}}
              </div>
            </div>
          </div>
          <div class="award-list" v-else>
                    <div class="award-instance" v-for="(item, _) in enAwardList" :key="_">
                        <i class="el-icon-trophy"></i>
                        {{item.content}}
                    </div>
          </div>
        </div> -->
        <div class="news-wrapper">
          <h3 v-if="$store.state.language === 'zh-CN'">
            新闻动态
            <span class="read-more" @click="$router.push('/New')">更多</span>
          </h3>
          <h3 v-else>
            Recent News
            <span class="read-more" @click="$router.push('/New')">More</span>
          </h3>
          <div class="news-list" v-if="$store.state.language === 'zh-CN'">
            <div class="news-instance" v-for="(item, _) in newsList" :key="_">
              <div class="time">
                <i class="el-icon-time"></i>
                {{item.time}}
                <span style="color: #dd7f05" v-if="item.id == 2">[置顶]</span>
              </div>
              <div class="news-content"  @click="handleNewDetail(item)">{{item.title}}</div>
            </div>
          </div>
          <div class="news-list" v-else>
            <div class="news-instance" v-for="(item, _) in enNewsList" :key="_">
              <div class="time">
                <i class="el-icon-time"></i>
                {{item.time}}
                <span style="color: #dd7f05" v-if="item.id == 1">[Top]</span>
              </div>
              <div class="news-content" @click="handleNewDetail(item)">{{item.title}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { RequestStatus } from "../utils/constans";
import { formatBackTime } from "../utils/common";
import { iPersonInfo, iNew, iAward } from "../typings/personinfo";
import $api from "../api";
import mock from "../mock/home";

@Component
export default class BasicInfo extends Vue {
  private requestStatus: number = 0;
  private personInfo: String = "";
  private enPersonInfo: String = "";
  private newsList: iNew[] = [];
  private enNewsList: iNew[] = [];
  private awardList: iAward[] = [];
  private enAwardList: iAward[] = [];
  private dialogVisible: boolean = false;
  private dialogContent: string = '加载中';
  @Prop() private msg!: string;

  mounted() {
    // this.getPersonInfo();
    this.getBasicInfo();
    this.getRecentNews();
    // this.getAwardList();
  }

  getBasicInfo(){
    if (this.$store.state.offModel) {
      this.personInfo = mock.ch;
      this.enPersonInfo = mock.en;
    } else {
    $api.module.findContentByName('home_basic')
      .then((res) => {
          this.personInfo = (res as any).content;
      })

    $api.module.findContentByName('en_home_basic')
      .then((res) => {
          this.enPersonInfo = (res as any).content;
      })}
  }
  getPersonInfo() {
    $api.personInfo.findAllPersonalResumeClient().then(res => {
      this.requestStatus += 1;
      (res as any).map((record: iPersonInfo) => {
        if (record.language === "英语") {
          this.enPersonInfo = record.individual_resume;
        } else {
          this.personInfo = record.individual_resume;
        }
      });
    });
  }

  getRecentNews() {
    $api.personInfo.findAllNewsClient().then(res => {
      this.requestStatus += 1;
      let list = [];
      list = (res as any)
      list.reverse();
      list.map((record: iNew) => {
        if ((record.language === "英语" && this.enNewsList.length < 5) || record.id == 1) {
          if(record.id == 1){
            this.enNewsList.unshift(record);
          }else{
           this.enNewsList.push(record);
          }
        }
        if ((record.language === "汉语" && this.newsList.length < 5) || record.id == 2) {
          if(record.id == 2){
            this.newsList.unshift(record);
          }else{
           this.newsList.push(record);
          }
        }
      });
    });
  }

  getAwardList() {
    $api.personInfo.findAllAwardHonorsClient().then(res => {
      this.requestStatus += 1;
      (res as any).map((record: iAward) => {
        if (record.language === "英语" && this.enAwardList.length < 5) {
          this.enAwardList.push(record);
        } else if (this.awardList.length < 5) {
          this.awardList.push(record);
        }
      });
    });
  }

  handleNewDetail(item: any){
    localStorage.setItem("new-datail-cache", JSON.stringify(item));
    this.$router.push({
      name: "NewDetail",
      params: {
        item
      }
    })
  }
}
</script>

<style scoped lang="scss">
.basic-info-wrapper {
  padding: 0 30px;
  box-sizing: border-box;
  .container {
    width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin: auto;
  }
  .person-info,
  .news-award {
    text-align: left;
    background: white;
    width: 50%;
    h3 {
      color: #f5ae54;
      margin: 0 0 20px;
      padding-bottom: 10px;
      border-bottom: 2px solid #113f6c;
      strong {
        margin-left: 20px;
        color: #113f6c;
      }
    }
    .read-more {
      float: right;
      position: relative;
      top: -5px;
      font-size: 16px;
      cursor: pointer;
      &:hover {
        color: #f5ae54;
      }
    }
  }
  .person-info,
  .news-wrapper,
  .award-wrapper {
    background: white;
    padding: 20px;
  }
  .person-info {
    padding-right: 25px;
    h3 {
      padding-left: 10px;
      margin-bottom: 0;
    }
    img {
      margin-top: 20px;
      height: 200px;
    }
    .content {
      vertical-align: top;
      text-indent: 15px;
      overflow-y: unset;
    }
  }

  .news-award {
    h3 {
      color: #113f6c;
    }
  }
  .news-instance,
  .award-instance {
    box-sizing: border-box;
    padding: 15px 0;
    border-bottom: 1px solid gainsboro;
    .time {
      opacity: 0.75;
    }
    .news-content {
      margin-top: 10px;
      padding-left: 20px;
      cursor: pointer;
      &:hover{
        color: #113f6c;
        text-decoration: underline;
      }
    }
    .content,
    .news-content {
      max-width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .el-icon-time,
    .el-icon-trophy {
      color: #f5ae54;
      font-size: 18px;
    }
  }
}
// @media screen and (max-width: 700px) {
//   .basic-info-wrapper {
//     .container {
//       flex-wrap: wrap;
//     }
//     .person-info,
//     .news-award {
//       width: 100%;
//     }
//   }
// }
</style>
